<template>
  <div class="hauner ha-swiper__box" :style="`width:${width}px;height:${height}px`">
    <div class="ha-swiper-body" :class="{'ha-swiper-body__run': swiperRun}">
      <span class="ha-swiper-item" :class="itemClass(item)" >
        {{ item?.text || item }}
      </span>
    </div>    
  </div>
</template>
<script>

export default {
  name: 'HaSwiperText',
  props: {
    option: { type: Object, default: () => ({}) },
    list: { type: Array, default: () => [] },
    width: { type: Number, default: 600 },
    height: { type: Number, default: 24 },
    runLoop: { type: Number, default: 3 }
  },
  data: () => ({
    loop: 0,
    swiperRun: true,
    item: {}
  }),
  computed: {
    itemClass() {
      return (item) => {
        let type = item?.type || this.option?.type || 'info'
        return `ha-swiper-text__${type}`
      }
    }
  },
  watch: {
    list: {
      handler(newVal, oldVal) {
        this.loop = 0
        this.swiperRun = false
        this.refeshSwiper()
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    
  },
  mounted() {},
  methods: {
    async refeshSwiper() { 
      for(let i=0; i<=this.list.length; i++){
        this.item = this.list[i]
        this.swiperRun = false
        await new Promise(resolve => setTimeout(resolve, 25 * 1000))
        this.swiperRun = true
      }
      this.loop ++
      if(this.loop < this.runLoop){
        this.refeshSwiper()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.hauner.ha-swiper__box{
  position: relative;
  overflow: hidden;
  .ha-swiper-body{
    display: inline-block;
    position: absolute;
    top: 0;
    left: 650px;
    align-items: center;
    transition: all 0s ease;
    &.ha-swiper-body__run{
      left: 0px;
      transition: all 20s ease;
    }
    .ha-swiper-item{
      width: 600px;
      overflow: hidden;
      font-size: 16px;
      letter-spacing: 0.15em;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ha-swiper-text__info{
      color: #333;
    }
    .ha-swiper-text__success{
      color: #4caf50;
    }
    .ha-swiper-text__warning{
      color: #ff9800;
    }
    .ha-swiper-text__danger{
      color: #f44336;
    }
  }
}
</style>
